<template>
	<div class="login">
		<el-form label-width="100px" class="login_box">
			<h3 class="login_title">欢迎登录</h3>
       			<el-form-item label="手机号" prop="phone">
        			<el-input v-model="test1"  placeholder="请输入账号" maxlength="11" onkeyup="value=value.replace(/[^0-9.]/g,'') " ref="input1" @blur="changeName(test1)"></el-input>
       			</el-form-item>
				<el-form-item label="密码" prop="password">
       				<el-input type="password" v-model="test2" placeholder="请输入密码" ref="input2" @blur="changeName1(test2)"><br /></el-input> 
				</el-form-item>
      			<router-link to="register" replace active-class="res">立即注册</router-link>
      			<el-form-item class="login_btn">
         			<el-button type="primary" @click="loginBtn()">登录</el-button> 
      			</el-form-item>
    	</el-form>
  </div>
</template>

<script type="text/javascript">
	export default {
		data() {
				return {
					test1: '',
					test2: '',
					test3: '',
					
				}
			},
 
			methods: {
				//获取验证码
				getYzm() {
					let reg = /^1[0345789][0-9]{9}$/;
					if(this.test1 == '' || this.test2 == "") {//验证当用户输入的手机号为空或者不正确时不能进行获取验证码
						this.$message({
							message: '手机号密码不能为空！',
							type: 'warning'
						});
					} else if(!reg.test(this.test1)) {
						this.$message.error("请输入正确的手机号");
					} else {
						this.timer();
						console.log(this.test1);
					}
 
				},
				//用户名的失去光标判断
				changeName(userName) {
					let name = userName;
					if(name == '' || name == undefined || name == null) {
						// 用户名为空时，input框获得焦点
						this.$refs.input1.focus();
					} else {
						console.log(name);
					}
				},
				//密码框失去光标判断
				changeName1(pass) {
					if(pass == '' || pass == undefined || pass == null) {
						// 密码为空时，input框获得焦点
						this.$refs.input2.focus();
					} else {
						console.log(pass);
					}
				},
				loginBtn() {
					
					//一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。然后在javascript里面这样调用：this.$refs.input1  这样就可以减少获取dom节点的消耗了
					this.test1 = this.$refs.input1.value;//获取input1的值，减少获取dom节点的消耗    
					this.test2 = this.$refs.input2.value;
						let userPhone = this.test1;
                		sessionStorage.setItem('userPhone', userPhone) 
						this.$router.push('/index');
						console.log(this.test1);//打印出input框输入的值
						console.log(this.test2);
					}
				},
 
}
</script>


<style>
.login_box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 180px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 20px #909399;
  }
.login_title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
.login_btn{
  margin-left:15%;
}

</style>